<template>
	<div class="main-container">
		<!-- <h1>文章编辑</h1> -->
		<div class="center-container">
			<div class="left">
				<h3>文章标题</h3>
				<el-input v-model="title" style="width: 20vw;margin-bottom: 10px;" placeholder="请输入标题"></el-input>
				<h3>文章配图</h3>
				<el-upload class="upload-demo" :action="actionUrl" :file-list="fileList" :auto-upload="false"
					list-type="picture" :data="uploadData" :on-change="handleChange" :on-remove="handleRemove"
					ref="uploadListFile" multiple>
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
				</el-upload>
			</div>
			<div class="right">
				<h3>文章编辑</h3>
				<quill-editor v-model="content" style="height: 50vh;" :options="editorOption">
				</quill-editor>
			</div>
		</div>
		<div class="bottom-cntainer">
			<el-button type="primary" round @click="getMsgId">提交</el-button>
			<el-button type="danger" round @click="resetMsg">重置</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "festival",
		data() {
			return {
				content: '欢迎使用',
				title: "",
				fileList: [],
				msgId: "",
				uploadData: {}, //el-upload携带的数据
				actionUrl: process.env.VUE_APP_BASEURL_API + "/wx/admin/addMsg",
				// quill配置项
				editorOption: {
					modules: {
						toolbar: [
							['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
							['blockquote', 'code-block'], //引用，代码块

							[{
								'header': 1
							}, {
								'header': 2
							}], // 标题，键值对的形式；1、2表示字体大小
							[{
								'list': 'ordered'
							}, {
								'list': 'bullet'
							}], //列表
							[{
								'script': 'sub'
							}, {
								'script': 'super'
							}], // 上下标
							[{
								'indent': '-1'
							}, {
								'indent': '+1'
							}], // 缩进
							[{
								'direction': 'rtl'
							}], // 文本方向

							[{
								'size': ['small', false, 'large', 'huge']
							}], // 字体大小
							[{
								'header': [1, 2, 3, 4, 5, 6, false]
							}], //几级标题

							[{
								'color': []
							}, {
								'background': []
							}], // 字体颜色，字体背景颜色
							[{
								'font': []
							}], //字体
							[{
								'align': []
							}], //对齐方式

							['clean'], //清除字体样式
							// ['image', 'video'] //上传图片、上传视频
						],
						imageResize: {
							displayStyles: {
								backgroundColor: 'black',
								border: 'none',
								color: 'white'
							},
							modules: ['Resize', 'DisplaySize', 'Toolbar']
						}
					},
				},
			}
		},
		methods: {
			getMsgId() {
				let contentLen = this.content.length

				//文章内容为空无需重置
				if (!contentLen > 0) {
					this.$message.error("内容为空!")
					return;
				}
				//生成msgId
				this.$axios.get("/wx/admin/getMsgId").then(res => {
					this.commitMsg(res.data)
				})
			},
			commitMsg(msgId) {
				var that = this

				if (msgId == null || msgId == "") {
					this.$message.error("提交失败!")
					return;
				}
				var addData = {
					msgTitle: this.title,
					msgContent: this.content,
					msgId: msgId
				}
				this.uploadData = addData
				this.$confirm('确认提交?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '正在提交',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.6)'
					});
					//el-upload手动上传
					this.$refs.uploadListFile.submit(); //不用el-upload自带的上传(存在多文件上传的时候会有多次请求的情况)
					this.$notify({
						title: '提交成功',
						message: '成功提交文章数据',
						type: 'success'
					});
					loading.close()
				}).catch((err) => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				})
			},
			//删除确认
			resetMsg() {
				let contentLen = this.content.length
				//文章内容为空无需重置
				if (!contentLen > 0) {
					return;
				}
				this.$confirm('此操作将重置编辑内容, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					//重置msg内容
					this.content = ""
					this.$message({
						type: 'success',
						message: '已重置'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消重置'
					});
				});
			},
			// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
			handleChange(file, fileList) {
				this.fileList = fileList
			},
			// 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
			handleRemove(file, fileList) {
				this.fileList = fileList
			},
			handleError(err, file, fileList) {
				// 上传失败的回调函数
				this.$message.error('添加失败');
			},
		}
	}
</script>

<style scoped>
	/deep/ .ql-container {
		height: 40vh;
	}

	.main-container {}

	.center-container {
		/* border: 1px solid blue; */
		text-align: left;
		display: flex;
	}

	.bottom-cntainer {
		text-align: center;
	}

	.right {
		margin-left: 10px;
	}

	/deep/ .el-upload-list--picture .el-upload-list__item {
		width: 20vw;
	}
</style>